<template>
  <el-dialog
    title="添加参赛人员"
    v-model="show"
    @opened="handleOpenModaled"
  >
    <div class="content-heder-container">
      <el-space>
        <el-input
          v-model="query_data.studentName"
          placeholder="搜索姓名"
        ></el-input>
        <el-input
          v-model="query_data.phone"
          placeholder="搜索手机号"
        ></el-input>
        <el-button
          size="large"
          :icon="Search"
          circle
          @click="()=>handleLoad(true)"
          :loading="loading"
        />
        <!-- <el-button
          size="large"
          :icon="Delete"
          circle
          @click="handleRest"
        /> -->
      </el-space>

    </div>

    <el-table
      :data="data"
      empty-text="未查询到未报名参赛人员"
      v-loading="loading"
    >
      <el-table-column
        prop="studentId"
        label="学生ID"
      />
      <el-table-column
        prop="studentName"
        label="姓名"
      />
      <el-table-column
        prop="phone"
        label="手机号码"
      />
      <el-table-column
        label="性别"
        prop="gender"
        width="72"
      >
        <template #default="scope">
          <el-tag
            v-if="scope.row.gender==0"
            type="danger"
          >女</el-tag>
          <el-tag
            v-if="scope.row.gender==1"
            type="primary"
          >男</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="schoolName"
        label="学校"
      />
      <el-table-column
        prop="date"
        label="操作"
      >
        <template #default="scope">
          <el-button
            @click="handleStuToJoin(scope.row)"
            :disabled="disabled"
            :loading="loading"
          >报名</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="total"
        @current-change="handlePage"
      />
    </div>
  </el-dialog>
</template>

<script  setup>
import { usePage } from "@/hooks/usePage"
import { ApplicationApi, GetNotRegisteredStudentsApi } from "@/api/manage/institution"
import { ref } from "vue"
import { Search, Delete } from "@element-plus/icons-vue"
import { ElMessage } from 'element-plus'

const props = defineProps({
  eventId: Number | String
})
const show = ref(false);
const {
  total,
  data,
  loading,
  query_data,
  handleLoad,
  handlePage
} = usePage({
  api_fn: GetNotRegisteredStudentsApi,
  q_data: {
    studentName: '',
    phone: '',
    eventId: props.eventId
  }
})
const handleOpenModaled = () => {
  handleLoad(true);
}
const handleOpenModal = () => {
  show.value = true;
}
const handleRest = () => {
  query_data.value.studentName = "";
  query_data.value.phone = "";
  handleLoad(true);
}
/**
 * 加入报名
 */
const disabled = ref(false)
const handleStuToJoin = async (row) => {
  disabled.value = true
  console.log(row);
  // 报名操作
  let res = await ApplicationApi({
    studentId: row.studentId,
    eventId: props.eventId
  })
  if (!res.success) {
    ElMessage.error(res.message);
    disabled.value = false
  } else {
    ElMessage.success(res.message);
    // 获取列表
    handleLoad(true);
    disabled.value = false

  }

}
defineExpose({
  handleOpenModal
})
</script>

<style lang="scss" scoped>
.content-heder-container {
  padding: 16px 0;
  display: flex;
  align-content: center;
  justify-content: flex-end;
}
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
</style>